<!-- AccumulatePointsList.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>积分列表</title>
		<!-- <link rel="stylesheet" href="../../css/weui.min.css"> -->
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.content-div {
				padding: 10px;
			}
			.loadFailure {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 100%;
			}
			.loadFailure img {
				max-width: 100%;
				display: inline-block;
			}
			.noSign {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 100%;
            }
			.noSign img {
					max-width: 100%;
					display: inline-block;
			}
			.rank-num {
				line-height: 42px;
				padding-right: 10px;
				width: 20px;
			}
			.mui-table-view-cell > a:not(.mui-btn) {
				padding: 10px;
				padding-right: 40px;
			}
			.user-icon {
				width: 42px;
				height: 42px;
				border-radius: 21px;
			}
			.user-name {
				line-height: 42px;
				padding-right: 20px;
			}
			.a-p-right-div {
				text-align: right;
			}
			.accmulate-point-title {
				color: #18b4ed;
			}
			.accmulate-point-num {
				font-size: 16px;
			}
			.load-more-div {
				height: 40px;
				background-color: white;
			}
			.load-more-cell {
				line-height: 40px;
				text-align: center;
			}
			.content-top-div {
				height: 34px;
				line-height: 20px;
				position: relative;
			}
			.current-a-p {
				color: #18b4ed;
				text-align: center;
			}
			p {
				font-size: 12px;
				margin-bottom: 0;
			}
			.all-peoples-num {
				float: right;
			}
			.self-title {
				color: #ee0000;
			}
			.add-user-div{
				position: absolute;
				right: -10px;
				top: -10px;
				width: 44px;
				height: 44px;
				display: none;
			}
			.add-user-img{
				position: absolute;
				right: 10px;
				top: 10px;
				width: 24px;
			}
			#top_div{
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="content-div">
			<div class="top-title-div base_tag_font">
				<p class="current-a-p" id="top_div" style="display: none;">
				</p>
			</div>
			<div class="content-top-div base_tag_font" >
				<p class="all-peoples base_dark_grey_shallow">
					成员总数<span id="peopleNum"> 0 </span> 人
				</p>
				<div class="add-user-div" onclick="onSelectUserClick();">
					<img class="add-user-img" src="../../image/icon_add_img.png">
				</div>
			</div>
			<ul id="AccmulatePointsTableView" class="mui-table-view mui-table-view-chevron">
			</ul>
			<div class="load-more-div" hidden="hidden">
				<p class="load-more-cell base_dark_grey_shallow base_content_font">
					上拉加载更多呦~
				</p>
			</div>
		</div>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_no_data.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/AccumulatePoints.js"></script>
	<script type="text/javascript">
		var page=1;
		var row=10;
		var refreshCount=0;
		var totalNum="";
		apiready = function() {
		 	showProgress();
			loadNewData();
			setRefreshHeader();
			setPullUpRefresh();
			setupAddPeopleBtn();
			setupNotifi();
		}
		//设置通知刷新列表
		function setupNotifi(){
			api.addEventListener({
			    name: 'addPlanTeamStuNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
			api.addEventListener({
			    name: 'studyPlanDeleteUserNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
			api.addEventListener({
			    name: 'refreshPeopleListSelfDta'
			}, function(ret, err) {
			    var value = ret.value;
			    refreshFreeCourse(value.cid, value.pid);
			});
			api.addEventListener({
				name : 'refreshPeopleMoocScheduleNotifi'
			}, function(ret, err) {
				//暂时屏蔽
				var cid = ret.value.cid;
				var pid = ret.value.pid;
				var schedule = ret.value.schedule;
				var scheduleId = cid + pid;
			    $('#'+scheduleId).html('学习进度：'+schedule);
			});
		}
		//刷新自由课程进度
		function refreshFreeCourse(cid, pid){
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				pid : pid,
				cid : cid
			}
			// console.log(url_freeCourseSchedule+'\n'+JSON.stringify(param));
			cfnetppPOST(url_freeCourseSchedule, param, false, function(data, status){
				// alert(JSON.stringify(data));
				if (status == 'success') {
					if (data.code == 200) {
						var studiedNum = parseInt(numStrWithStr(data.data[0].videosum));
						var allNum = parseInt(numStrWithStr(data.data[0].videosums));
						if (studiedNum > allNum) {
							studiedNum = allNum;
						}
					    var percentageNum = (studiedNum / allNum) * 100;
						var percentage = percentageNum.toFixed(0) + '%'; 
					    var scheduleId = cid + pid;
					    $('#'+scheduleId).html('学习进度：'+percentage);
					}
				}
			});
		}
		function numStrWithStr(str){
			if (str == '' || str == null || str == undefined) {
				return '0';
			}
			return str;
		}
		function setupAddPeopleBtn(){
			var usertype = api.pageParam.usertype;
			if (usertype == '1') {//老师
				$('.add-user-div').show();
			}
		}
		//选人
		function onSelectUserClick(){
			api.openWin({useWKWebView:true,
			    name: 'StudyCreatTeamNew_Win',
			    url: '../StudyPlanManage/StudyCreatTeamNew_Win.html',
			    pageParam: {
			        pid : api.pageParam.pid,
			        planType : 'edit'
			    }
			});
		}
		//刷新数据
		function refreshData() {
			$('#noNet').hide();
			showProgress();
			loadNewData();
		}
		//获得新数据
		function loadNewData() {
			page = 1;
			loadData();
		}
        //获得更多数据
		function loadMoreData() {
			if (refreshCount >= row) {
				page++;
				loadData();
			}
		}	
		//从网路获取数据
		function loadData() {
			var param = {
//				jid:158,
//				uid:119039,
//				cid:14533,{"jid":"171","uid":"29489","cid":"28760","pid":"12132","page":1,"rows":10}
//				pid:3606,
				jid : $api.getStorage('cfnetppjxid'),
				uid:$api.getStorage('cfnetppuid'),
				cid:api.pageParam.cid,
				pid:api.pageParam.pid,
				page : page,
				rows : row
			};
			var urlString = url_getUserPointsList;
			if (api.pageParam.openType == 'train_stu') {//实习课程列表
				urlString = url_trainUserIntegral;
			}
//			var url_getUserPointsList = "http://base.cfnet.org.cn/index.php/points/Getpoints/getUserPointsList"
			cfnetppPOST(urlString, param, false, function(data, status) {
			
				hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					$('#noNet').hide();
					if (data.code == 200) {
						$('#noData').hide();
						if(returnInt(data.ranking)!=0){//当排名不为0时，即当前用户不处于该学习计划
							$('#top_div').show();
							var topStr = "获取" + returnInt(data.score) + "积分，第" + returnInt(data.ranking) + "名"
							$('#top_div').html(topStr);
						}else{
						    $('#top_div').hide();
						}
						totalNum=returnInt(data.total)
						$('#peopleNum').html(totalNum);
						var list = data.userArr;
						if (list != null && list.constructor == Array) {
							SetUI(list)
							refreshCount = list.length;
							if (refreshCount >= row) {
								$('.load-more-div').show();
							}else{
								$('.load-more-div').hide();
							}
						} else {
							$('.load-more-div').hide();
							if (page == 1) {
								$('#AccmulatePointsTableView').html('');
								$('#noData').show();
								$('#noNet').hide();
						    } else {
							    ShowToast('我是有底线的')
								$('#noData').hide();
								$('#noNet').hide();
						    }
						}
					} else {
						// if (data.code == 101) {
						// 	api.toast({
						// 	    msg: '该课程没有可以学习的章节，无积分排名！'
						// 	});
						// }
						$('.load-more-div').hide();
						if (page == 1) {
							$('#AccmulatePointsTableView').html('');
							$('#noData').show();
							$('#noNet').hide();
						} else {
						    ShowToast('我是有底线的')
							$('#noData').hide();
							$('#noNet').hide();
						}
					}
				} else {
					$('.load-more-div').hide();
					$('#AccmulatePointsTableView').html('');
					$('#noNet').show();
					$('#noData').hide();
				}
			});
		}

		//显示在html
		function SetUI(list) {
			var len = list.length;
			var strhtml="";
			var data = "";
			var self_str="";
			var self_str2="";
			for (var i = 0; i < list.length; i++) {
				var num=$('#AccmulatePointsTableView').children().length+i+1;
				data = list[i];
				var DataArr = JSON.stringify(data).replace(/"/g, '&quot;');
				if (data.uid == $api.getStorage('cfnetppuid')) {
					var scheduleId = api.pageParam.cid+api.pageParam.pid;
				    self_str='<a class="self-title">';
					self_str2='<p id="'+scheduleId+'" class="study-progress base_dark_grey base_tag_font self-title">';
				} else  {
					self_str='<a >';
					self_str2='<p class="study-progress base_dark_grey base_tag_font">';
				}
				 var str = '<li class="mui-table-view-cell mui-media" onclick="itemclicl(' +data.uid + ')">'+
						self_str+
						'<span class="rank-num mui-pull-left base_dark_grey base_tag_font">'+num+'</span>'+
						'<img class="mui-media-object mui-pull-left user-icon" src="'+HeadPortraitIsNull(data.uimage)+'">'+
						 '<span class="user-name mui-pull-left base_dark_grey base_tag_font">'+isStringNull(data.uname)+'</span>'+
						'<div class="mui-media-body a-p-right-div" style="line-height: 42px;'+(data.showrate==0?"display: none":"")+'" >'+
							self_str2+
								'学习进度：<span>'+returnInt(data.rate) +'</span>%'+
							'</p>'+
							// '<p class="accmulate-point-title base_tag_font">'+
							// 	'<span class="accmulate-point-num">'+returnInt(data.points)+'</span>积分值'+
							// '</p>'+
						'</div> </a>'+
					'</li>';
				
				strhtml = strhtml + str;
			}
			if (page == 1) {
				$('#AccmulatePointsTableView').html(strhtml);
			} else {
				$('#AccmulatePointsTableView').append(strhtml);
			}
		}
		//列表点击
	    function itemclicl(uid) {
		  // api.openWin({useWKWebView:true,
			// 	name : 'AccumulatePointsCollect_Win',
			// 	url : 'AccumulatePointsCollect_Win.html',
			// 	pageParam : {
			// 		uid:uid,
			// 	    cid:api.pageParam.cid,
			// 	    pid:api.pageParam.pid,
			// 	    totalNum:totalNum
			// 	},
			// 	vScrollBarEnabled : false,
			// 	hScrollBarEnabled : false,
			// 	slidBackEnabled : false,
			// 	softInputMode : 'auto',
			// });
		}
	</script>
</html>